<script>

import ScrollPane from '@/layout/components/TagsView/ScrollPane.vue'
import { teach, teacherTime } from '@/api/system/api'

export default {
  name: 'index',
  components: { ScrollPane },
  data() {
    return {
      today:'',
      teacherId: "",
      date: new Date().toLocaleDateString(),
      options: [],
      defaultValues: '',
      time: new Date(),
      scheduleList: [],
      currentTimeList:[],
      loading:false,
      // isAppoint:false
    }
  },
  created() {

    this.teacher()
    this.teachers()
  },
  watch: {
    defaultValues: {
      handler() {
        this.teacher();
      },
      immediate:true
    }
  },
  methods: {
    // 咨询师列表
    teachers() {
      teach().then(res => {

        this.options = res.rows

        this.teacherId=res.rows.map(item=>{
          return item.id
        })
        this.defaultValues = this.teacherId[3];

      })
    },
    // 咨询师时间
    teacher() {
      teacherTime(this.date, this.defaultValues).then(res => {

        this.scheduleList = res.data

        this.loading = false;

        this.currentTimeList = res.rows

      })
    },
    returnClass(data) {
      let obj = {};
      this.scheduleList.forEach(item => {
        if(item.date === data.day) {
          obj.noState = true
          if(item.status === true) {
            obj.noState = false;
            obj.hasState = true;
          }
        }
      })
      return obj;
    },
    updataTime(data) {
      // 点自己不会请求点别的才会请求（同官网）
      teacherTime(this.date, this.defaultValues).then(res => {

        this.currentTimeList = res.rows
      })
      this.scheduleList.forEach(item => {
        if(item.date === data.day) {
          if(data.isSelected == false) {
            this.loading = true;
            this.teacher(data.day);
          }
        }
      })
    },
    //   上一天
    prevDay() {
      let date = new Date(this.today)
      date.setDate(date.getDate() - 1)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      this.time = `${year}-${month}-${day}`
      teacherTime(this.date, this.defaultValues).then(res => {

        this.currentTimeList = res.rows
      })
    },
    // 下一天
    nextDay() {
      let date = new Date(this.today)
      date.setDate(date.getDate() + 1)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      this.time = `${year}-${month}-${day}`
      teacherTime(this.date, this.defaultValues).then(res => {

        this.currentTimeList = res.rows
      })
    },
  }
}
</script>

<template>
  <div class="container">
    <!--  顶部选择器-->
    <div class="selectBox">
      当前咨询师:
      <!--    咨询师选择器-->
      <div class="el-select">
        <el-select v-model="defaultValues" placeholder="林子儒">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <!--  body-->
    <div class="scheduling-body">
      <!--    排班日期-->
      <div class="scheduling-month">
        <el-calendar>
          <template
            v-model="teacherId"
            slot="dateCell"
            slot-scope="{date, data}">
            <!--            给每个有背景颜色的时间盒子加点击事件-->
            <div class="wrap" :class="returnClass(data)" @click="updataTime(data)">
              {{data.day.split('-').slice(1)[1]}} <br>
            </div>
          </template>
        </el-calendar>
      </div>
      <!--    详细情况-->
      <div class="scheduling-day">
        <div class="scheduling-day-header">
          <div class="scheduling-day-header-title">
            详细情况
            <span>
            <i class="el-icon-question"></i>
          </span>
          </div>
          <div class="el-button-group">
            <el-button size="mini" @click="prevDay">上一天</el-button>
            <el-button size="mini" @click="nextDay">下一天</el-button>
          </div>
        </div>
        <div class="scheduling-day-body">
          <div class="scheduling-day-body-top">
            <el-button size="small" class="el-button">可约</el-button>
            <el-button size="small">休息</el-button>
          </div>
          <div class="scheduling-day-body-center">
            <div class="time-list" v-loading="loading">
              <div v-for="(item,index) in currentTimeList" :key="index" class="time-list-item">
                <el-tag v-if="item.status == 0" class="tag-box" type="success"  effect="dark">可约</el-tag>
                <el-tag v-if="item.status == 2" class="tag-box" type="warning"  effect="dark">休息</el-tag>
                {{item.startTime}} - {{item.endTime}}
              </div>
              <div class="el-button--default">

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
::v-deep .el-calendar-day{
  padding: 0;
  .wrap {
    height: 100%;
    padding: 12px;
    position: relative;

  }
  .hasState {
    background: rgb(241, 255, 238);
    &::after {
      width: 100%;
      content: '可约';
      display: block;
      position: absolute;
      left: 0;
      text-align: center;
      bottom: 10px;
      color: rgb(35, 165, 0);
    }
  }
  .noState {
    background: rgb(255, 232, 232);
    &::after {
      width: 100%;
      content: '不可约';
      color: rgb(255, 27, 27);
      display: block;
      position: absolute;
      left: 0;
      text-align: center;
      bottom: 10px;

    }
  }
}
.container {
  width: 100%;
  height: 100vh;
  padding: 35px 20px;
  box-sizing: border-box;

  .selectBox {
    font-size: 16px;
  }

  .scheduling-body {
    display: flex;
    justify-content: space-between;
    overflow-x: auto;
    gap: 40px;

    .scheduling-month {
      width: 50%;
      min-width: 690px;
    }

    .scheduling-day {
      width: 50%;
      min-width: 690px;

      .scheduling-day-header {
        display: flex;
        justify-content: space-between;
        padding: 12px 20px;
        border-bottom: 1px solid #dfe6ec;
        box-sizing: border-box;
      }

      .scheduling-day-body {
        padding: 12px 20px;
        box-sizing: border-box;

        .scheduling-day-body-top {
          .el-button {
            width: 100px;
            height: 30px;
            line-height: 30px;
            padding: 0;
            font-size: 14px;
          }
        }

        .scheduling-day-body-center {
          padding: 20px 0;
          box-sizing: border-box;

          .time-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;

            .time-list-item {
              width: 24%;
              height: 80px;
              line-height: 80px;
              text-align: center;
              position: relative;
              border-radius: 4px;
              background-color: rgba(219, 162, 0, .23);
              box-sizing: border-box;

              .tag-box {
                position: absolute;
                top: 5px;
                right: 5px;
                background-color: #ffba00;
                border-color: #ffba00;
                color: #fff;
                height: 20px;
                padding: 0 5px;
                line-height: 19px;
                border-width: 1px;
                border-style: solid;
                border-radius: 4px;
                font-size: 12px;
              }
            }
            .el-button--default{
              padding: 10px 20px;
              font-size: 14px;
              border-radius: 4px;
            }
          }
        }
      }
    }
  }
}
::v-deep .el-calendar-day {
  //padding: 0;
  .normal {
    position: relative;
    margin: 0;
    //padding: 15px;
    margin: 0;
    width: 100%;
    height: 100%;
  }
  .calendarItem {
    background: pink;
  }
}
::v-deep .appoint{
  //position: absolute;
  //left: 50%;
  transform:translateX(-50%);
  bottom: 10px;
  font-size: 16px;
}
</style>
